import React, { useState, useEffect } from 'react';
// import mainpage_bg_mobile from '../../../img/kc/mobile_form.jpg'

import { Input, List, Button, Pagination } from 'antd';
import { openNotification_util, fetchsync_util, convertISODateTimeToYYYYMMDDHHMM } from '../util/util.js'
import { useHistory } from 'react-router-dom';
import mainpage_bg from '../../../img/shipSRM/mobile_top.png'

var storage = window.localStorage;
const { Search } = Input;

const Normalitem = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var height = props.height
  return (
    <div style={{ width: "95%", marginLeft: "2%", height: height ? height : "0.8rem", position: "relative",fontWeight: "800"}}>
      <div style={styles.lineitemnormal}>
        <span style={props.styleobj}>
          &nbsp;&nbsp;{props.label}&nbsp;:&nbsp;</span><span style={props.styleobjright}>{fitem[fkey]}</span></div>
      <div style={styles.lineleftstyle}>
      </div>
    </div>)

}
const Normalitemtwo = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var fkeytwo = props.keydtwo
  return (
    <div style={styles.listitemnormal}>
      <div style={styles.listitemleft}>
        &nbsp;&nbsp;{props.label}:&nbsp;&nbsp;

        <span style={{ fontWeight: "800"}}>
          {fitem[fkey]}</span></div>
      <div style={{ width: "50%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" }}>
        {props.labeltwo}:&nbsp;&nbsp;{fitem[fkeytwo]}&nbsp;&nbsp;</div>
    </div>

  )

}

const Mobile_qgd_list = () => {
  const history = useHistory();

  const [pagedata, setpagedata] = useState({
    ddata: [],
    pagesize: 5,
    current: 1,
    nowddata: []
  })


  //rtdata处理
  const dealwithrtdata = (obj) => {
    const ddd = [];
    for (let i = 0; i < obj.length; i++) {
      var origindata = obj[i];
      for (var keyt in origindata) {
        origindata[keyt] = origindata[keyt] ? origindata[keyt] : ""
      }
      origindata.key = i;
      origindata.xuhao = i + 1;
      origindata['djrq'] = origindata['djrq'].substring(0, 10)
      origindata.qgsl = parseFloat(origindata.qgsl).toFixed(1)
      ddd.push(origindata)
    }
    var nowddata = ddd.slice((pagedata.current - 1) * pagedata.pagesize, pagedata.current * pagedata.pagesize)
    setpagedata(Object.assign({}, pagedata, { ddata: ddd, nowddata: nowddata }));

  }


  //查询方法
  const query = async () => {
    const url = "/admin/cggl/qgd_list_mobile"
    let data = await fetchsync_util(url, 'POST', {}, "json")
    dealwithrtdata(data.resultdata);
  }

  //登出
  const handlelogout = () => {
    history.push({ pathname: '/mobile_login' });
    storage.islogin = "loginout"
  }

  //进入来料检
  const toitem = (item) => {
    storage.preitem_qgd = JSON.stringify({ data: item, type: "edit" });
    history.push({ pathname: '/shipSRM_mobile/cggl/mobile_qgd_form' });
  }

  const handleadd = () => {
    storage.preitem_qgd = JSON.stringify({ data: {}, type: "add" })
    history.push({ pathname: '/shipSRM_mobile/cggl/mobile_qgd_form' });
  }
  //去首页
  const handletomainpage = () => {
    history.push({ pathname: '/shipSRM_mobile/mobile_mainpage' });
  }


  const searchqgdbyjybh = async (e) => {
    const url = "/admin/cggl/queryQgdByJybh"
    let rtdata = await fetchsync_util(url, 'POST', { 'keyword': e }, "json")
    dealwithrtdata(rtdata.resultdata);
  }


  const onShowSizeChange = (page) => {
    let nowddata = pagedata.ddata.slice((page - 1) * pagedata.pagesize, page * pagedata.pagesize)
    setpagedata(Object.assign({}, pagedata, { current: page, nowddata: nowddata }));
  }


  //componentdidmount
  useEffect(() => {
    query();
  }, []);



  return (
    <div style={{ height: "100vh", width: "100%", position: 'relative', backgroundColor: "white", overflow: "auto",scrollbarWidth: "none" }}>

<div style={{
          width: "100%", height: "38vw",
          backgroundImage: `url(${mainpage_bg})`,
          position: "relative", fontSize: "0.9rem",
          textIndent: "2rem", fontWeight: "500", color: "white", borderRadius: "0 0 15px 15px"
        }} >
        <br />&nbsp;&nbsp;&nbsp;&nbsp;请购单列表
        <Button type="primary" style={{
            width: "15%", height: "1.8rem", borderRadius: "1.8rem",
            position: "absolute", right: "1%", top: "5%", borderStyle: "none",
            backgroundColor: "rgba(0,0,0,0.1)",
          }}
            onClick={handlelogout}>
            登出
          </Button>
          <Button type="primary" style={{
            width: "15%", height: "1.8rem", borderRadius: "1.8rem",
            position: "absolute", right: "18%", top: "5%", borderStyle: "none",
            backgroundColor: "rgba(0,0,0,0.1)",
          }}
            onClick={handletomainpage}>
            首页
          </Button>
      </div>

      <div style={{ width: "100%", position: "absolute", top: "12vh", borderRadius: "10px", overflow: "hidden" }}>
        <div style={{ width: "100vw", backgroundColor: "#FFFFFF", overflowY: "scroll" }}>
          <div style={{ width: "100%", height: "1.9rem", position: "relative", lineHeight: '1.9rem' }}>
            <div style={{ width: "90%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left" }}>
              &nbsp;&nbsp;<span style={{ fontWeight: "800" }}>查询条件</span>：
              <Search
                placeholder="单据号或者日期查询"

                onSearch={(e) => { searchqgdbyjybh(e) }}
                style={{ width: 200, marginTop: '0.2rem' }}
              /></div>
          </div>
          <List
            itemLayout="horizontal"
            dataSource={pagedata.nowddata}
            renderItem={item => (

              <div style={{
                height: "6.6 rem", width: "95%", marginLeft: "2.5%", backgroundColor: "white", marginTop: "0.5rem", marginBottom: "0.5rem", position: "relative", paddingTop: "0.5rem",
                fontWeight: "400", fontSize: "0.6rem", borderRadius: "5px", overflow: "hidden", textAlign: 'left', boxShadow: "0px 0px 5px  rgba(0, 0, 0, 0.25)",
                borderStyle: "none", borderWidth: "0.05rem", borderColor: "#B8B8B8"
              }}
              >
                <div style={styles.linenormal}>
                  <div style={{ width: "50%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left", fontWeight: "700" 
                    ,  color:"#377AF6"
                  }}>
                    &nbsp;&nbsp;序号：{item.key + 1}</div>
                  <div style={styles.lineleftstyle}>
                    <span style={{ fontWeight: "bolder" }}></span>&nbsp;&nbsp;</div>
                </div>

                <Normalitemtwo label="单据号" keyd="djh" labeltwo="单据日期" keydtwo="djrq" item={item} styleobj={{ fontWeight: "800" }} />
                <Normalitemtwo label="请购人" keyd="create_by" labeltwo="总数量" keydtwo="zsl" item={item} />
                <Normalitem    label="备注说明" keyd="bzsm" item={item}  />

      
                <Button type="primary" style={{
                  margin: "2.5%", fontSize: "0.6rem", height: "1.32rem", width: "30%",
                  lineHeight: "0.6rem",backgroundColor:"white",color:"#717371",borderStyle:"solid",borderColor:"#cfd2cf",
                  borderRadius:"0.2rem",  
                             }} onClick={() => { toitem(item) }}>查看</Button>

              </div>

            )}
          />
        </div>
        <Pagination size="small" defaultCurrent={1} total={pagedata.ddata.length} style={{ marginBottom: '2vw', marginTop: '2vw' }}
          onChange={onShowSizeChange} current={pagedata.current} pageSize={pagedata.pagesize}
        />
        <div>
          <Button type="primary" style={{
            width: "95%", margin: "2.5%", fontSize: "0.8rem", height: "2rem",
            background: '#377AF6', borderRadius: '0.2rem',
            lineHeight: "0.75rem"
          }}
            onClick={() => { handleadd() }}>新增</Button>

            
        </div>

      </div>

    </div>
  )

}


export default Mobile_qgd_list

var styles = {
  linenormal: { width: "95%", marginLeft: "2.5%", height: "0.8rem", position: "relative" },
  lineitemnormal: { width: "100%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left" },
  listitemnormal: { width: "100%", height: "0.8rem", position: "relative", fontWeight: "800" },
  lineleftstyle: { width: "50%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" },
  listitemleft: { width: "50%", height: "100%", position: "absolute", left: "2%", top: "0", textAlign: "left" }
}